<template>
  <div class="header">
    <el-form ref="form" :model="form">
      <div class="search">
        <el-form-item label="车牌号" class="label">
          <el-input v-model="form.name" class="input" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="车主姓名" class="label">
          <el-input v-model="form.name" class="input" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="车辆标签" class="label">
          <el-select placeholder="请选择车辆标签" class="input" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{background:'#ebecf0',color:'#3b3c3c'}"
     >
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="name" label="车牌号" />
      <el-table-column prop="door" label="车位号" />
      <el-table-column prop="person" label="常用" />
      <el-table-column prop="time" label="联系电话" />
      <el-table-column prop="time" label="车主姓名" />
      <el-table-column prop="time" label="单元-门牌" />
      <el-table-column label="车辆标签">
        <template slot-scope="scope">{{ scope.row.status }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showInfoDialogVisible = true">{{ scope.row.option }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        background
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 查看轨迹信息对话框 -->
    <el-dialog :visible.sync="showInfoDialogVisible" width="60%" class="fatherdialog">
      <div class="dialog_box">
        <div class="dialog_content">
          <div class="dialog_title">轨迹信息</div>
          <div>
            <div class="number">
              <span class="car">车牌号</span>
              <el-button>苏B-Y678T</el-button>
            </div>
              <el-form>
                  <div class="search">
                <el-form-item label="选择日期" >
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
               <el-form-item>
                <el-button type="primary" size="mini" style="margin-left:40px">查询</el-button>
              </el-form-item>

                </div>
              </el-form>


            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{background:'#ebecf0',color:'#3b3c3c'}"
             >
              <el-table-column type="index" width="120px" label="序号" />
              <el-table-column prop="name" label="时间" />
              <el-table-column prop="door" label="小区" />
              <el-table-column prop="person" label="位置" />
              <el-table-column prop="time" label="类型" />
              <el-table-column label="抓拍画面"  width="100">
                <template slot-scope="scope" >
                  <img :src="scope.row.img" alt class="img" @click="showImg(scope.row.img)" />
                </template>
              </el-table-column>
            </el-table>
            <div style="position: absolute;right: 50px;top: 500px;">
              <img src="../../assets/app/地图.png" alt="">
            </div>
          </div>
          <div class="dialogpagination">
            <el-pagination
              :current-page.sync="page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 图片放大 -->
    <img-dialog v-if="isShownimg" :img="chooseImg" @closeImg="closeImg" />
  </div>
</template>

<script>
import ImgDialog from "@/components/Imgdialog";
export default {
  name: "House",
  components: {
    ImgDialog
  },
  data() {
    return {
      form: {},
      value1:[],
      tableData: [
        {
          time: "2016-05-02",
          name: "弄堂加油",
          door: "1888",
          person: "jyb",
          option: "查看轨迹",
          status: "yes",
          img:
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3b39c89c7384b9e8fae08d35660e1b7~tplv-k3u1fbpfcp-watermark.image"
        },
        {
          time: "2016-05-02",
          name: "弄堂加油",
          door: "1888",
          person: "jyb",
          option: "查看轨迹",
          status: "yes",
          img:
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3b39c89c7384b9e8fae08d35660e1b7~tplv-k3u1fbpfcp-watermark.image"
        }
      ],
      total: 100,
      page: 10,
      //   查看轨迹信息对话框
      showInfoDialogVisible: false,
      isShownimg: false,
      chooseImg: null
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    handleCurrentChange() {
      console.log(1);
    },
    showImg(img) {
      console.log(img);

      this.isShownimg = true;
      this.chooseImg = img;
    },
    closeImg() {
      this.isShownimg = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  background: #ffffff;
  padding: 25px;
  padding-bottom: 100px;
  min-height: 800px;
  position: relative;
  .search {
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid #dcdee3;
    margin-bottom: 30px;
  }
  .input {
    width: 346px;
  }
  .label {
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
  }
  .pagination {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 50px;
  }
  .fatherdialog {
    .number {
      margin-bottom: 20px;
      border-top: 1px dashed #ccc;
      border-bottom: 1px solid #ccc;
      padding: 35px 0;
      .car {
        margin-right: 15px;
      }
    }
    .dialog_content {
      padding: 0px 30px 300px;
      .img {
        width: 50px;
        height: 34px;
      }
    }
    .dialogpagination {
      float: right;
      margin-top: 180px;
    }
  }
}
</style>


